<template>
	<view>
		<!-- 顶部导航栏 -->
		<!-- <view class="nav-bar">
			<uni-icons type="back" size="24" @click="goBack" />
			<text class="nav-title">添加设备</text>
		</view> -->
		<!-- 传入符合 datacom 规范的数据，即可渲染出一个选择器  -->
		<!-- 使用 v-model 双向绑定 picker 的选中值 -->
		<view class="dz-from-bz" v-show="isshow">
			<!-- site_name == '' 是 直接创建工单 -->
			<view v-if="site_name == ''" class="dz-from-bz-flex">

				<uni-data-picker placeholder="请选择区域" popup-title="请选择区域" v-model="area_site_id" :localdata="areaList"
					style="width: 100%;"></uni-data-picker>

				<uni-data-picker placeholder="请选择项目" popup-title="请选择项目" v-model="depart_id" :localdata="departList"
					style="width: 100%;margin-top:10px;"></uni-data-picker>
				<map-picker v-model="location" @change="onLocationChange" placeholder="点击选择地图位置" />

				<!-- 显示选中的经纬度 -->

				<view v-if="location.longitude">
					经度：{{ location.longitude }}，纬度：{{ location.latitude }}
				</view>
			</view>
			<view v-else>
				<!-- site_name != '' 是从巡检页创建的工单 -->
				巡检点：{{site_name}}
			</view>
		</view>


		<view class="dz-line" v-show="isshow && canEdit"></view>
		<view v-show="isshow && canEdit" class="dz-from" style="display:none;padding: 18px 18px 0;">
			<view style="margin-bottom:20rpx;">设备检修措施</view>

			<view v-for="(item, index) in checkItems" :key="index" class="check-row">
				<view style="display:flex;">
					<view class="dz-jcx-no">{{index+1}}</view> {{item.label}}
				</view>
				<radio-group @change="e => onStatusChange(index, e.detail.value)">
					<label style="margin-right:10px;font-size:14px;">
						<radio value="normal" :checked="item.status === 'normal'" /> 正常
					</label>
					<label style="font-size:14px;">
						<radio value="abnormal" :checked="item.status === 'abnormal'" /> 异常
					</label>
				</radio-group>

			</view>
		</view>

		<view class="dz-line" v-show="isshow"></view>
		<view class="dz-from-bz" v-show="isshow" style="padding: 18px 18px 8px;">

			<view class="dz-from-bz-text">
				<view>备注</view>
				<textarea v-model="content" auto-height :placeholder="placeholder" />
				<view>IMEI号</view>
				<textarea v-model="code" auto-height placeholder="请输入IMEI号" />
				<view>SIM卡号</view>
				<textarea v-model="pn" auto-height placeholder="请输入卡号" />

				<view class="dz-from-fj">
					<!-- <view ref="input" class="input"></view> -->
					<fileUploader limitsize="10240" @get-img="getImg"></fileUploader>

				</view>
			</view>

			<view class="dz-from-jc-">

				<radio-group class="dz-from-jc" @change="radioChangeUrgency">
					<view class="dz-jcx">
						<view>部署结果</view>
						<label class="uni-list-cell uni-list-cell-pd">
							<view>
								启动
								<radio value="0" color="#4d72ff" style="transform:scale(0.85)"
									:checked="resultStatus===0" />
								异常
								<radio value="1" color="#4d72ff" style="transform:scale(0.85)"
									:checked="resultStatus===1" />
							</view>

						</label>
					</view>
				</radio-group>
			</view>
		</view>
		<button @tap="createOrder" :loading="isSubmit" class="primary">启动设备</button>
		<view style="height: 18px;"></view>
	</view>
</template>

<script>
	import MapPicker from '@/components/map-picker/map-picker.vue';
	import {
		mapState
	} from 'vuex';
	import fileUploader from '@/components/fileUploader/fileUploader.vue'
	export default {
		data() {
			return {
				canEdit: true,
				location: {
					address: '',
					longitude: null,
					latitude: null
				},
				checkItems: [{
						label: "更换监测芯条",
						itemID: 1,
						status: 'normal'
					},
				],
				resultStatus: 0,
				site_name: '',
				isSubmit: false,
				canEdit: true,
				isshow: true,
				content: '',
				code: '',
				pn:'',
				imgArr: [],

				area_id: 0,
				area_site_id: 0,
				areaList: [],

				depart_id: 0,
				departList: [],

				urgencyLevel: 0,
				levelList: [{
						name: '低',
						value: 1
					},
					{
						name: '中',
						value: 2
					}
				],
				placeholder: '请输入备注信息'
			}
		},
		computed: {
			...mapState([
				"userInfo"
			]),
			myAreaId() {
				if (this.area_id != 0) {
					this.getSiteList();
				}
			},
		},
		components: {
			fileUploader,
			MapPicker
		},
		onShow() {

		},
		onLoad(opts) {
			if (opts && opts.code) {
				this.code = opts.code;
			}
			this.getSiteTree()
			this.getSiteList()
		},
		methods: {
			onStatusChange(index, value) {
				this.checkItems[index].status = value;
				this.$forceUpdate(); // 小程序环境下可能需要强制刷新
			},
			getImg(data) {
				this.imgArr = data; // fileUploader 返回的本地路径
			},
			onLocationChange(data) {
				console.log('选中的位置：', data);
			},
			async createOrder() {

				// const incomplete = this.checkItems.some(i => !i.status) || !this.finalStatus;
				// if (incomplete) {
				// 	return uni.showToast({
				// 		title: '请完整填写表单',
				// 		icon: 'none'
				// 	});
				// }


				console.log(this.area_site_id)
				if (this.area_site_id == 0) {
					uni.showToast({
						title: '请选择区域和项目',
						icon: 'none'
					})
					return
				}
				// if (this.content == '') {
				// 	uni.showToast({
				// 		title: '请输入备注',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.code == '') {
					uni.showToast({
						title: '请输入设备编号',
						icon: 'none'
					})
					return
				}
				// if (this.imgArr.length == 0) {
				// 	uni.showToast({
				// 		title: '请上传图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.urgencyLevel == 0) {
				// 	uni.showToast({
				// 		title: '请选择',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.isSubmit) return
				this.isSubmit = true
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.createDevice,
					data: {
						check_items: this.checkItems,
						depart_id: this.depart_id,
						area_site_id: this.area_site_id,
						resultStatus: this.resultStatus,
						content: this.content,
						images: this.imgArr.join(','),
						code: this.code,
						lnglat: this.location.longitude + ',' + this.location.latitude,
						address: this.location.address,
						pn:this.pn
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.isSubmit = false
					uni.showToast({
						title: '提交成功'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				} else {
					this.isSubmit = false
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			//紧急程度
			radioChangeUrgency: function(e) {
				// this.urgencyLevel = e.target.value
				this.resultStatus = e.target.value
			},
			async getSiteTree() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.siteTree,
					data: {},
					needLogin: true
				})
				if (res.code == 1) {
					this.areaList = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async getSiteList() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.siteTree2,
					data: {
						page: 1,
						limit: 100
					}
				})
				if (res.code == 1) {
					this.departList = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			getImg(data) {
				this.imgArr = data
			},
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.dz-jcx-no {
		background: #4d72ff;
		color: #fff;
		font-size: 12px;
		width: 18px;
		height: 18px;
		border-radius: 2px;
		text-align: center;
		line-height: 18px;
		margin-right: 6px;
	}

	.check-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.check-label {
		font-size: 26rpx;
	}

	.input {
		background: #f7f7f7;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 26rpx;
		margin-bottom: 30rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		padding: 30rpx;
		/* background-color: #fff; */
		/* border-bottom: 1px solid #eee; */
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.dz-from {
		display: flex;
		padding: 18px;
		width: 90%;
		margin: 0 auto;
		justify-content: space-between;
		/* align-items: center; */
		font-size: 16px;
	}

	.dz-from-bz {
		display: flex;
		padding: 18px;
		width: 90%;
		margin: 0 auto;
		align-items: flex-start;
		flex-direction: column;
		font-size: 16px;
		background: #fff;
	}

	.dz-from {
		display: flex;
		padding: 18px;
		width: 90%;
		margin: 0 auto;
		/* align-items: flex-start; */
		flex-direction: column;
		font-size: 16px;
		background: #fff;
	}

	.dz-from-time {
		display: flex;
		align-items: center;
		font-size: 15px;
	}

	.dz-from-top .dz-from-time:first-child {
		margin-bottom: 3px;
	}

	.dz-from .iconfont {
		font-size: 18px;
		color: #8d8d8d;
		margin-right: 3px
	}

	.dz-line {
		height: 10px;
	}

	.dz-from-column {
		flex-direction: column;
	}

	.dz-from .dz-jcx {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		flex: 1;
		margin-bottom: 18px;
	}

	.dz-from .dz-jcx:last-child {
		margin-bottom: 0;
	}

	.dz-jcx-l {
		flex: 1;
		margin-right: 14px;
		width: 70%;
		display: flex;
		align-items: center;
	}

	.dz-jcx-input {
		display: block;
		font-size: 16px;
		line-height: 1.8em;
		height: 1.8em;
		min-height: 1.8em;
		overflow: hidden;
		width: 30%;
		padding: 5px 9px;
		border: solid 1px #d6d6d6;
	}

	.dz-from-jc- {
		width: 100%;
		margin-top: 14px;
	}

	.dz-from-jc {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		width: 100%;
	}

	.dz-from-button {
		margin: 18px;
		padding-bottom: 18px;
	}

	.dz-from-bz-text {
		width: 100%
	}

	.dz-from-bz-text textarea {
		padding: 12px 0;
		width: 100%;
		font-size: 15px;
		min-height: 30px;
	}

	.dz-from-fj {
		display: flex;
		flex-wrap: wrap;
	}

	.dz-from-bz-flex {
		display: flex;
		flex-direction: column;
		align-items: self-start;
		width: 100%;
	}

	.dz-from-fj-edit {
		width: 80px;
		border: solid 1px #efefef;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 80px;
		color: #adadad;
		font-size: 14px;
		margin-right: 10px;
		justify-content: center;
		position: relative;
		margin-bottom: 10px
	}

	.dz-from-fj-edit .iconfont {
		font-size: 24px;
		margin-bottom: 1px
	}

	.dz-from-fj-img-img {
		width: 80px;
		height: 80px;
	}

	.dz-from-jian {
		position: absolute;
		right: 2px;
		top: 2px;
	}

	.dz-from-jian .iconfont {
		color: rgb(255, 255, 255);
		font-size: 11px;
		transform: rotate(45deg);
		border-radius: 50%;
		padding: 3px;
		background: rgb(68, 138, 255);
	}

	.shenpi-list-r {
		color: #9f9f9f;
		margin-left: 7px;
	}

	.dz-just {
		justify-content: space-between;
		width: 100%;
	}

	.dz-jcx-no {
		background: #4d72ff;
		color: #fff;
		font-size: 12px;
		width: 18px;
		height: 18px;
		border-radius: 2px;
		text-align: center;
		line-height: 18px;
		margin-right: 6px;
	}

	.dz-wei {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 92%;
		border: dashed 2px #e0e0e0;
		padding: 11px;
		margin-top: 14px;
	}

	.dz-wei .iconfont {
		font-size: 21px;
		margin-top: 4px;
		margin-right: 1px;
	}

	.dz-jcx {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		flex: 1;
		margin-bottom: 18px;
	}

	.primary {
		background: #4d72ff !important;
		box-shadow: 0 2px 11px rgb(0 56 216 / 15%);
		color: #fff !important;
		border-radius: 30px;
		font-size: 17px;
		padding: 2px;
		width: 90%;
		margin-top: 18px
	}
</style>